85:I[903690,["/chat-static/_next/static/immutable/chunks/0f7vmp09w0w3_.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l1ze4wl3hwyo.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/1-wzazpj6wxjv.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/1coue_ozvgza6.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3twuepbj0sa46.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/0lqecjmpjs03d.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/2n7jko15fxnc8.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/309um4vobmrg1.js","/chat-static/_next/static/immutable/chunks/0lpzz48chq3z_.js","/chat-static/_next/static/immutable/chunks/0esh3_fydqhs4.js","/chat-static/_next/static/immutable/chunks/0fqzt-x_byqxq.js","/chat-static/_next/static/immutable/chunks/31ksuowt-h8kz.js","/chat-static/_next/static/immutable/chunks/3vib52bi7ylnf.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/313gqxshd-pvz.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2bf3kb-va9_w_.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/3dhcra7d70kox.js","/chat-static/_next/static/immutable/chunks/3bd2e1qm07sst.js","/chat-static/_next/static/immutable/chunks/1a66wkxyahiky.js","/chat-static/_next/static/immutable/chunks/0yhvouprkh27j.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/29x8k6m14yofx.js"],"ExplicitChatIdProvider"] 86:I[838238,["/chat-static/_next/static/immutable/chunks/0f7vmp09w0w3_.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l1ze4wl3hwyo.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/1-wzazpj6wxjv.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/1coue_ozvgza6.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3twuepbj0sa46.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/0lqecjmpjs03d.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/2n7jko15fxnc8.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/309um4vobmrg1.js","/chat-static/_next/static/immutable/chunks/0lpzz48chq3z_.js","/chat-static/_next/static/immutable/chunks/0esh3_fydqhs4.js","/chat-static/_next/static/immutable/chunks/0fqzt-x_byqxq.js","/chat-static/_next/static/immutable/chunks/31ksuowt-h8kz.js","/chat-static/_next/static/immutable/chunks/3vib52bi7ylnf.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/313gqxshd-pvz.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2bf3kb-va9_w_.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/3dhcra7d70kox.js","/chat-static/_next/static/immutable/chunks/3bd2e1qm07sst.js","/chat-static/_next/static/immutable/chunks/1a66wkxyahiky.js","/chat-static/_next/static/immutable/chunks/0yhvouprkh27j.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/29x8k6m14yofx.js"],"SWRDataProvider"] 87:T1b400,[V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#FFD100", // Yellow foreground: "#000000", }, secondary: { DEFAULT: "#00A651", // Green foreground: "#FFFFFF", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 50 100% 50%; --primary-foreground: 0 0% 0%; --secondary: 142 100% 33%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0.5rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 50 100% 50%; --primary-foreground: 0 0% 0%; --secondary: 142 100% 33%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "MotionFleet - Vehicle-Based Advertising Platform", description: "Connect advertisers with vehicle owners for dynamic mobile advertising campaigns", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/signup/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/campaigns/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Car, Filter, Plus, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" export default function CampaignsPage() { const [searchQuery, setSearchQuery] = useState("") const campaigns = [ { id: "camp-001", title: "Summer Promotion", status: "active", budget: 5000, spent: 2340, reach: "45.2K", vehicles: 8, startDate: "Mar 1, 2025", endDate: "May 31, 2025", locations: ["Downtown", "Suburbs", "Shopping District"], }, { id: "camp-002", title: "Product Launch", status: "active", budget: 10000, spent: 3200, reach: "62.8K", vehicles: 12, startDate: "Mar 10, 2025", endDate: "Jun 10, 2025", locations: ["City Center", "Business District", "University Area"], }, { id: "camp-003", title: "Holiday Special", status: "scheduled", budget: 7500, spent: 0, reach: "0", vehicles: 15, startDate: "Apr 1, 2025", endDate: "Apr 30, 2025", locations: ["Shopping Malls", "Entertainment District", "Residential Areas"], }, { id: "camp-004", title: "Brand Awareness", status: "completed", budget: 4000, spent: 4000, reach: "38.5K", vehicles: 6, startDate: "Jan 15, 2025", endDate: "Feb 28, 2025", locations: ["Downtown", "Tourist Areas", "Convention Center"], }, { id: "camp-005", title: "Local Business Promotion", status: "paused", budget: 3000, spent: 1200, reach: "15.3K", vehicles: 4, startDate: "Feb 10, 2025", endDate: "Apr 10, 2025", locations: ["Local Neighborhoods", "Business District"], }, ] const filteredCampaigns = campaigns.filter((campaign) => campaign.title.toLowerCase().includes(searchQuery.toLowerCase()), ) return (

Campaigns

Manage and monitor your advertising campaigns

setSearchQuery(e.target.value)} />

All Campaigns Active Scheduled Completed Paused

{filteredCampaigns.map((campaign) => (

{campaign.title} {campaign.status.charAt(0).toUpperCase() + campaign.status.slice(1)}

{campaign.startDate} - {campaign.endDate}

Budget spent ${campaign.spent} / ${campaign.budget}

{campaign.vehicles} vehicles

{campaign.reach} reach

{campaign.locations.slice(0, 2).map((location, index) => ( {location} ))} {campaign.locations.length > 2 && ( +{campaign.locations.length - 2} more )}

))}

{filteredCampaigns .filter((campaign) => campaign.status === "active") .map((campaign) => (

{campaign.title} Active

{campaign.startDate} - {campaign.endDate}

Budget spent ${campaign.spent} / ${campaign.budget}

{campaign.vehicles} vehicles

{campaign.reach} reach

{campaign.locations.slice(0, 2).map((location, index) => ( {location} ))} {campaign.locations.length > 2 && ( +{campaign.locations.length - 2} more )}

))}

{/* Similar content for other tabs */}

) } [V0_FILE]typescriptreact:file="app/dashboard/campaigns/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/tracking/page.tsx" "use client" import { useState } from "react" import { Filter, MapPin, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function TrackingPage() { const [searchQuery, setSearchQuery] = useState("") const [selectedCampaign, setSelectedCampaign] = useState("all") const vehicles = [ { id: "veh-001", driver: "John Smith", vehicle: "Toyota Camry", licensePlate: "ABC-1234", campaign: "Summer Promotion", status: "active", location: "Downtown", lastUpdated: "5 mins ago", distance: "12.5 miles today", impressions: "2.3K today", }, { id: "veh-002", driver: "Sarah Johnson", vehicle: "Honda Civic", licensePlate: "XYZ-5678", campaign: "Product Launch", status: "active", location: "Shopping District", lastUpdated: "2 mins ago", distance: "8.2 miles today", impressions: "1.8K today", }, { id: "veh-003", driver: "Michael Brown", vehicle: "Ford F-150", licensePlate: "DEF-9012", campaign: "Summer Promotion", status: "inactive", location: "Suburbs", lastUpdated: "1 hour ago", distance: "5.7 miles today", impressions: "950 today", }, { id: "veh-004", driver: "Emily Davis", vehicle: "Chevrolet Malibu", licensePlate: "GHI-3456", campaign: "Brand Awareness", status: "active", location: "Business District", lastUpdated: "10 mins ago", distance: "10.3 miles today", impressions: "2.1K today", }, { id: "veh-005", driver: "David Wilson", vehicle: "Nissan Altima", licensePlate: "JKL-7890", campaign: "Local Business Promotion", status: "active", location: "University Area", lastUpdated: "15 mins ago", distance: "7.8 miles today", impressions: "1.5K today", }, ] const filteredVehicles = vehicles.filter( (vehicle) => (vehicle.driver.toLowerCase().includes(searchQuery.toLowerCase()) || vehicle.vehicle.toLowerCase().includes(searchQuery.toLowerCase()) || vehicle.licensePlate.toLowerCase().includes(searchQuery.toLowerCase())) && (selectedCampaign === "all" || vehicle.campaign === selectedCampaign), ) const campaigns = [...new Set(vehicles.map((vehicle) => vehicle.campaign))] return (

Vehicle Tracking

Track and monitor your advertising vehicles in real-time

setSearchQuery(e.target.value)} />

List View Map View

{filteredVehicles.map((vehicle) => (

{vehicle.driver} {vehicle.vehicle} • {vehicle.licensePlate}

{vehicle.status.charAt(0).toUpperCase() + vehicle.status.slice(1)}

Campaign

{vehicle.campaign}

Location

{vehicle.location}

Last Updated

{vehicle.lastUpdated}

Distance Traveled

{vehicle.distance}

Impressions

{vehicle.impressions}

))}

Vehicle Locations Real-time tracking of all active vehicles

Map view will be displayed here

Integrated with Google Maps API

) } [V0_FILE]typescriptreact:file="app/dashboard/tracking/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/wallet/page.tsx" "use client" import { useState } from "react" import { ArrowDownUp, CreditCard, DollarSign, Download, Plus, Wallet } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function WalletPage() { const [period, setPeriod] = useState("month") const transactions = [ { id: "tx-001", description: "Campaign Payment - Summer Promotion", type: "payment", amount: 1200.0, status: "completed", date: "Mar 15, 2025", }, { id: "tx-002", description: "Campaign Payment - Product Launch", type: "payment", amount: 950.0, status: "completed", date: "Mar 10, 2025", }, { id: "tx-003", description: "Withdrawal to Bank Account", type: "withdrawal", amount: 2000.0, status: "completed", date: "Mar 5, 2025", }, { id: "tx-004", description: "Campaign Payment - Brand Awareness", type: "payment", amount: 750.0, status: "pending", date: "Mar 3, 2025", }, { id: "tx-005", description: "Deposit from Credit Card", type: "deposit", amount: 3000.0, status: "completed", date: "Feb 28, 2025", }, ] return (

Wallet

Manage your funds and track your transactions

Available Balance

$5,280.65

Available for campaigns or withdrawal

Total Spent

$12,450.00

{period === "month" ? "This month" : period === "year" ? "This year" : "All time"}

Pending

$750.00

Transactions in progress

Payment Methods

Active payment methods

Transactions Payment Methods Settings

Transaction History

View all your recent transactions Description Type Date Status Amount {transactions.map((transaction) => ( {transaction.description} {transaction.type.charAt(0).toUpperCase() + transaction.type.slice(1)} {transaction.date} {transaction.status.charAt(0).toUpperCase() + transaction.status.slice(1)} {transaction.type === "withdrawal" ? "-" : ""}${transaction.amount.toFixed(2)} ))}

Payment Methods

Manage your payment methods

Visa ending in 4242

Expires 04/26

Default

Mastercard ending in 5678

Expires 08/27

Bank Account

Chase ****1234

Wallet Settings Configure your wallet preferences

Auto-withdraw to bank account

Automatically withdraw funds when balance exceeds $5,000

Transaction notifications

Receive email and push notifications for all transactions

Currency preferences

Set your preferred currency for transactions

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { MapPin, BarChart3, Car, DollarSign, Shield, ChevronRight, Play } from "lucide-react" export default function Home() { const [isVideoModalOpen, setIsVideoModalOpen] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) // Handle form submission const handleContactSubmit = (e: React.FormEvent) => { e.preventDefault() // In a real app, you would send this data to your backend alert("Thank you for your message! We'll get back to you soon.") const form = e.target as HTMLFormElement form.reset() } // Scroll to section const scrollToSection = (id: string) => { const element = document.getElementById(id) if (element) { element.scrollIntoView({ behavior: "smooth" }) } setIsMobileMenuOpen(false) } return (

MotionFleet

{isMobileMenuOpen && (

)}

Turn Your Vehicle Into A Revenue Stream

Join MotionFleet and earn money by displaying ads on your vehicle. Connect with advertisers and track your earnings in real-time.

See how MotionFleet works

Features

Everything You Need to Succeed

Our platform connects vehicle owners with advertisers, providing tools for both to maximize their success.

{[ { icon: , title: "Real-Time Tracking", description: "Track vehicle locations and ad exposure in real-time with our advanced GPS integration.", color: "primary", }, { icon: , title: "Advanced Analytics", description: "Get detailed insights on campaign performance, audience reach, and ROI metrics.", color: "primary", }, { icon: , title: "Secure Payments", description: "Integrated wallet system with secure payment processing for both advertisers and vehicle owners.", color: "primary", }, { icon: , title: "Secure Authentication", description: "Multi-factor authentication and robust security measures to protect your account and data.", color: "secondary", }, { icon: , title: "Campaign Management", description: "Easily create, manage, and optimize advertising campaigns with our intuitive dashboard.", color: "secondary", }, { icon: , title: "Dynamic Pricing", description: "AI-driven pricing based on location, time, and audience reach to maximize ROI.", color: "secondary", }, ].map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

How It Works

Simple Process, Powerful Results

Our platform makes it easy for both advertisers and vehicle owners to get started and see results.

{/* Connecting line */}

{[ { number: 1, title: "Sign Up", description: "Create an account as a vehicle owner or advertiser and complete your profile.", }, { number: 2, title: "Connect", description: "Vehicle owners apply for campaigns, advertisers select vehicles that match their target audience.", }, { number: 3, title: "Earn & Grow", description: "Track performance, receive payments, and optimize campaigns for better results.", }, ].map((step, index) => (

{step.number}

{step.title}

{step.description}

))}

Pricing

Transparent Pricing for Everyone

Choose the plan that works best for your advertising needs or vehicle type.

{[ { title: "Basic", subtitle: "For small businesses", price: "$299", features: ["Up to 5 vehicles", "Basic analytics", "Standard support"], highlighted: false, buttonText: "Get Started", }, { title: "Pro", subtitle: "For growing businesses", price: "$599", features: ["Up to 20 vehicles", "Advanced analytics", "Priority support", "Campaign optimization"], highlighted: true, buttonText: "Get Started", }, { title: "Enterprise", subtitle: "For large organizations", price: "Custom", features: ["Unlimited vehicles", "Custom analytics", "Dedicated account manager", "API access"], highlighted: false, buttonText: "Contact Sales", }, ].map((plan, index) => (

{plan.title}

{plan.subtitle}

{plan.price}

{feature}

))}

Ready to Get Started?

Have questions or need more information? Our team is here to help.

Name

Message

</div>
                <Button type="submit" className="bg-primary text-black hover:bg-primary/90 transition-all">
                  Send Message
                </Button>
              </form>
            </div>
          </div>
        </section>
      </main>
      <footer className="border-t py-6 md:py-0">
        <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
          <div className="flex items-center gap-2">
            <Car className="h-6 w-6 text-primary" />
            <span className="text-lg font-bold">MotionFleet</span>
          </div>
          <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
            © 2025 MotionFleet. All rights reserved.
          </p>
          <div className="flex items-center gap-4">
            <Link href="#" className="text-sm font-medium hover:text-primary transition-colors">
              Privacy Policy
            </Link>
            <Link href="#" className="text-sm font-medium hover:text-primary transition-colors">
              Terms of Service
            </Link>
          </div>
        </div>
      </footer>

{/* Video Modal */}
      {isVideoModalOpen && (
        <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
          <div className="relative bg-background rounded-lg w-full max-w-4xl">
            <button
              className="absolute top-2 right-2 text-gray-500 hover:text-gray-700 z-10"
              onClick={() => setIsVideoModalOpen(false)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-6 w-6"
              >
                <path d="M18 6 6 18M6 6l12 12" />
              </svg>
            </button>
            <div className="p-1">
              <div className="aspect-video w-full bg-black rounded-lg overflow-hidden">
                <div className="h-full w-full flex items-center justify-center">
                  <p className="text-white text-center p-8">Video player would be embedded here</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/login/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Car, Eye, EyeOff, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription } from "@/components/ui/alert"

export default function LoginPage() {
  const router = useRouter()
  const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

// Form data
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [phone, setPhone] = useState("")
  const [activeTab, setActiveTab] = useState("email")

const validateEmail = (email: string) => {
    return String(email)
      .toLowerCase()
      .match(
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      )
  }

const validatePhone = (phone: string) => {
    return String(phone).match(/^\+?[0-9]{10,15}$/)
  }

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setError("")

// Validate form
    if (activeTab === "email") {
      if (!validateEmail(email)) {
        setError("Please enter a valid email address")
        return
      }

if (password.length < 6) {
        setError("Password must be at least 6 characters")
        return
      }
    } else {
      if (!validatePhone(phone)) {
        setError("Please enter a valid phone number")
        return
      }
    }

setLoading(true)

try {
      // Simulate authentication
      await new Promise((resolve) => setTimeout(resolve, 1500))

// In a real app, you would make an API call to your authentication endpoint
      // For demo purposes, we'll just redirect to the dashboard
      router.push("/dashboard")
    } catch (err) {
      setError("Authentication failed. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-1 flex-col items-center justify-center px-4 py-12">
        <div>
          <Link href="/" className="mb-8 flex items-center gap-2">
            <Car className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">MotionFleet</span>
          </Link>
        </div>
        <div className="w-full max-w-md space-y-6">
          <div className="space-y-2 text-center">
            <h1 className="text-3xl font-bold">Welcome back</h1>
            <p className="text-muted-foreground">Enter your credentials to access your account</p>
          </div>

{error && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

<Tabs defaultValue="email" value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="email">Email</TabsTrigger>
              <TabsTrigger value="phone">Phone</TabsTrigger>
            </TabsList>
            <TabsContent value="email">
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="name@example.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="password">Password</Label>
                    <Link href="/forgot-password" className="text-sm text-primary hover:underline">
                      Forgot password?
                    </Link>
                  </div>
                  <div className="relative">
                    <Input
                      id="password"
                      type={showPassword ? "text" : "password"}
                      placeholder="••••••••"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      required
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="absolute right-2 top-1/2 -translate-y-1/2"
                      onClick={() => setShowPassword(!showPassword)}
                    >
                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                    </Button>
                  </div>
                </div>
                <Button
                  type="submit"
                  className="w-full bg-primary text-black hover:bg-primary/90 transition-all"
                  disabled={loading}
                >
                  {loading ? (
                    <>
                      <svg
                        className="animate-spin -ml-1 mr-3 h-4 w-4 text-black"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Signing in...
                    </>
                  ) : (
                    "Sign in"
                  )}
                </Button>
              </form>
            </TabsContent>
            <TabsContent value="phone">
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="phone">Phone Number</Label>
                  <Input
                    id="phone"
                    type="tel"
                    placeholder="+1 (555) 000-0000"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    required
                  />
                </div>
                <Button
                  type="submit"
                  className="w-full bg-primary text-black hover:bg-primary/90 transition-all"
                  disabled={loading}
                >
                  {loading ? (
                    <>
                      <svg
                        className="animate-spin -ml-1 mr-3 h-4 w-4 text-black"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Sending code...
                    </>
                  ) : (
                    "Send verification code"
                  )}
                </Button>
              </form>
            </TabsContent>
          </Tabs>
          <div className="text-center text-sm">
            Don't have an account?{" "}
            <Link href="/signup" className="text-primary hover:underline">
              Sign up
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/signup/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation"
import { Car, Eye, EyeOff, AlertCircle, CheckCircle2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription } from "@/components/ui/alert"

export default function SignupPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const userType = searchParams.get("type") || "driver"

const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [accountType, setAccountType] = useState(userType)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")

// Form data for driver
  const [driverFirstName, setDriverFirstName] = useState("")
  const [driverLastName, setDriverLastName] = useState("")
  const [driverEmail, setDriverEmail] = useState("")
  const [driverPhone, setDriverPhone] = useState("")
  const [driverVehicleType, setDriverVehicleType] = useState("car")
  const [driverPassword, setDriverPassword] = useState("")

// Form data for advertiser
  const [companyName, setCompanyName] = useState("")
  const [businessEmail, setBusinessEmail] = useState("")
  const [businessPhone, setBusinessPhone] = useState("")
  const [industry, setIndustry] = useState("")
  const [advertiserPassword, setAdvertiserPassword] = useState("")

const validatePhone = (phone: string) => {
    return String(phone).match(/^\+?[0-9]{10,15}$/)
  }

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setError("")
    setSuccess("")

// Validate form
    if (accountType === "driver") {
      if (!driverFirstName || !driverLastName) {
        setError("Please enter your full name")
        return
      }

if (!validateEmail(driverEmail)) {
        setError("Please enter a valid email address")
        return
      }

if (!validatePhone(driverPhone)) {
        setError("Please enter a valid phone number")
        return
      }

if (driverPassword.length < 6) {
        setError("Password must be at least 6 characters")
        return
      }
    } else {
      if (!companyName) {
        setError("Please enter your company name")
        return
      }

if (!validateEmail(businessEmail)) {
        setError("Please enter a valid business email address")
        return
      }

if (!validatePhone(businessPhone)) {
        setError("Please enter a valid phone number")
        return
      }

if (!industry) {
        setError("Please enter your industry")
        return
      }

if (advertiserPassword.length < 6) {
        setError("Password must be at least 6 characters")
        return
      }
    }

setLoading(true)

try {
      // Simulate account creation
      await new Promise((resolve) => setTimeout(resolve, 1500))

// Show success message
      setSuccess("Account created successfully! Redirecting to dashboard...")

// Redirect after a short delay
      setTimeout(() => {
        router.push("/dashboard")
      }, 2000)
    } catch (err) {
      setError("Account creation failed. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-1 flex-col items-center justify-center px-4 py-12">
        <div>
          <Link href="/" className="mb-8 flex items-center gap-2">
            <Car className="h-6 w-6 text-primary" />
            <span className="text-xl font-bold">MotionFleet</span>
          </Link>
        </div>
        <div className="w-full max-w-md space-y-6">
          <div className="space-y-2 text-center">
            <h1 className="text-3xl font-bold">Create an account</h1>
            <p className="text-muted-foreground">Enter your information to get started</p>
          </div>

{error && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

{success && (
            <Alert variant="default" className="bg-green-50 text-green-800 border-green-200">
              <CheckCircle2 className="h-4 w-4 text-green-600" />
              <AlertDescription>{success}</AlertDescription>
            </Alert>
          )}

<Tabs defaultValue={accountType} value={accountType} onValueChange={setAccountType} className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="driver">Vehicle Owner</TabsTrigger>
              <TabsTrigger value="advertiser">Advertiser</TabsTrigger>
            </TabsList>
            <TabsContent value="driver">
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="first-name">First name</Label>
                    <Input
                      id="first-name"
                      placeholder="John"
                      value={driverFirstName}
                      onChange={(e) => setDriverFirstName(e.target.value)}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="last-name">Last name</Label>
                    <Input
                      id="last-name"
                      placeholder="Doe"
                      value={driverLastName}
                      onChange={(e) => setDriverLastName(e.target.value)}
                      required
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="name@example.com"
                    value={driverEmail}
                    onChange={(e) => setDriverEmail(e.target.value)}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone">Phone Number</Label>
                  <Input
                    id="phone"
                    type="tel"
                    placeholder="+1 (555) 000-0000"
                    value={driverPhone}
                    onChange={(e) => setDriverPhone(e.target.value)}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="vehicle-type">Vehicle Type</Label>
                  <RadioGroup
                    defaultValue="car"
                    value={driverVehicleType}
                    onValueChange={setDriverVehicleType}
                    className="flex flex-wrap gap-4"
                  >
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="car" id="car" />
                      <Label htmlFor="car">Car</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="suv" id="suv" />
                      <Label htmlFor="suv">SUV</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="truck" id="truck" />
                      <Label htmlFor="truck">Truck</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="van" id="van" />
                      <Label htmlFor="van">Van</Label>
                    </div>
                  </RadioGroup>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="password">Password</Label>
                  </div>
                  <div className="relative">
                    <Input
                      id="password"
                      type={showPassword ? "text" : "password"}
                      placeholder="••••••••"
                      value={driverPassword}
                      onChange={(e) => setDriverPassword(e.target.value)}
                      required
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="absolute right-2 top-1/2 -translate-y-1/2"
                      onClick={() => setShowPassword(!showPassword)}
                    >
                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                    </Button>
                  </div>
                </div>
                <Button
                  type="submit"
                  className="w-full bg-primary text-black hover:bg-primary/90 transition-all"
                  disabled={loading}
                >
                  {loading ? (
                    <>
                      <svg
                        className="animate-spin -ml-1 mr-3 h-4 w-4 text-black"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Creating account...
                    </>
                  ) : (
                    "Create account"
                  )}
                </Button>
              </form>
            </TabsContent>
            <TabsContent value="advertiser">
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="company-name">Company name</Label>
                  <Input
                    id="company-name"
                    placeholder="Acme Inc."
                    value={companyName}
                    onChange={(e) => setCompanyName(e.target.value)}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="business-email">Business email</Label>
                  <Input
                    id="business-email"
                    type="email"
                    placeholder="contact@company.com"
                    value={businessEmail}
                    onChange={(e) => setBusinessEmail(e.target.value)}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone">Phone Number</Label>
                  <Input
                    id="phone"
                    type="tel"
                    placeholder="+1 (555) 000-0000"
                    value={businessPhone}
                    onChange={(e) => setBusinessPhone(e.target.value)}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="industry">Industry</Label>
                  <Input
                    id="industry"
                    placeholder="Retail, Technology, etc."
                    value={industry}
                    onChange={(e) => setIndustry(e.target.value)}
                    required
                  />
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="password">Password</Label>
                  </div>
                  <div className="relative">
                    <Input
                      id="password"
                      type={showPassword ? "text" : "password"}
                      placeholder="••••••••"
                      value={advertiserPassword}
                      onChange={(e) => setAdvertiserPassword(e.target.value)}
                      required
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="absolute right-2 top-1/2 -translate-y-1/2"
                      onClick={() => setShowPassword(!showPassword)}
                    >
                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      <span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
                    </Button>
                  </div>
                </div>
                <Button
                  type="submit"
                  className="w-full bg-primary text-black hover:bg-primary/90 transition-all"
                  disabled={loading}
                >
                  {loading ? (
                    <>
                      <svg
                        className="animate-spin -ml-1 mr-3 h-4 w-4 text-black"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Creating account...
                    </>
                  ) : (
                    "Create account"
                  )}
                </Button>
              </form>
            </TabsContent>
          </Tabs>
          <div className="text-center text-sm">
            Already have an account?{" "}
            <Link href="/login" className="text-primary hover:underline">
              Sign in
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { BarChart3, Car, DollarSign, MapPin, TrendingUp, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  AreaChart,
  BarChart as RechartsBarChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Area,
  Bar,
} from "recharts"

interface ChartDataPoint {
  name: string
  impressions: number
  reach: number
  revenue: number
}

export default function DashboardPage() {
  const [isLoading, setIsLoading] = useState(true)
  const [chartData, setChartData] = useState<ChartDataPoint[]>([])
  const [activeTab, setActiveTab] = useState("performance")

useEffect(() => {
    // Simulate data loading
    const timer = setTimeout(() => {
      setChartData([
        { name: "Jan", impressions: 12000, reach: 8500, revenue: 1200 },
        { name: "Feb", impressions: 19000, reach: 12500, revenue: 1800 },
        { name: "Mar", impressions: 22000, reach: 15000, revenue: 2200 },
        { name: "Apr", impressions: 25000, reach: 17500, revenue: 2500 },
        { name: "May", impressions: 32000, reach: 22000, revenue: 3200 },
        { name: "Jun", impressions: 38000, reach: 25000, revenue: 3800 },
        { name: "Jul", impressions: 42000, reach: 28000, revenue: 4200 },
      ])
      setIsLoading(false)
    }, 1500)

return () => clearTimeout(timer)
  }, [])

return (
    <div className="flex flex-col gap-6 p-4 md:p-6">
      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
          <p className="text-muted-foreground">Welcome back! Here's an overview of your advertising campaigns.</p>
        </div>
        <Button className="bg-primary text-black hover:bg-primary/90 transition-all">
          <TrendingUp className="mr-2 h-4 w-4" />
          View Analytics
        </Button>
      </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {[
          {
            title: "Total Revenue",
            icon: <DollarSign className="h-4 w-4 text-muted-foreground" />,
            value: "$4,550.32",
            change: "+20.1% from last month",
          },
          {
            title: "Active Campaigns",
            icon: <BarChart3 className="h-4 w-4 text-muted-foreground" />,
            value: "12",
            change: "+2 new this week",
          },
          {
            title: "Vehicles",
            icon: <Car className="h-4 w-4 text-muted-foreground" />,
            value: "24",
            change: "+4 new this month",
          },
          {
            title: "Audience Reach",
            icon: <Users className="h-4 w-4 text-muted-foreground" />,
            value: "145.2K",
            change: "+12.3% from last month",
          },
        ].map((stat, index) => (
          <div key={index}>
            <Card className="overflow-hidden hover:shadow-md transition-all">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
                {stat.icon}
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stat.value}</div>
                <p className="text-xs text-muted-foreground">{stat.change}</p>
              </CardContent>
            </Card>
          </div>
        ))}
      </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
        <Card className="lg:col-span-4">
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Campaign Performance</CardTitle>
                <CardDescription>View the performance of your active campaigns</CardDescription>
              </div>
              <div className="flex space-x-2">
                <Button
                  variant={activeTab === "performance" ? "default" : "outline"}
                  size="sm"
                  onClick={() => setActiveTab("performance")}
                >
                  Performance
                </Button>
                <Button
                  variant={activeTab === "revenue" ? "default" : "outline"}
                  size="sm"
                  onClick={() => setActiveTab("revenue")}
                >
                  Revenue
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="h-[300px] w-full flex items-center justify-center">
                <div className="flex flex-col items-center">
                  <svg
                    className="animate-spin h-8 w-8 text-primary"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    ></circle>
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                  </svg>
                  <p className="mt-2 text-sm text-muted-foreground">Loading chart data...</p>
                </div>
              </div>
            ) : (
              <div className="h-[300px] w-full">
                {activeTab === "performance" ? (
                  <ResponsiveContainer width="100%" height="100%">
                    <AreaChart
                      data={chartData}
                      margin={{
                        top: 10,
                        right: 30,
                        left: 0,
                        bottom: 0,
                      }}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="name" />
                      <YAxis />
                      <Tooltip />
                      <Area type="monotone" dataKey="impressions" stackId="1" stroke="#FFD100" fill="#FFD100" />
                      <Area type="monotone" dataKey="reach" stackId="2" stroke="#00A651" fill="#00A651" />
                    </AreaChart>
                  </ResponsiveContainer>
                ) : (
                  <ResponsiveContainer width="100%" height="100%">
                    <RechartsBarChart
                      data={chartData}
                      margin={{
                        top: 10,
                        right: 30,
                        left: 0,
                        bottom: 0,
                      }}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="name" />
                      <YAxis />
                      <Tooltip />
                      <Bar dataKey="revenue" fill="#FFD100" />
                    </RechartsBarChart>
                  </ResponsiveContainer>
                )}
              </div>
            )}
          </CardContent>
        </Card>
        <Card className="lg:col-span-3">
          <CardHeader>
            <CardTitle>Active Vehicles</CardTitle>
            <CardDescription>Vehicles currently displaying your ads</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {[1, 2, 3, 4].map((i) => (
                <div
                  key={i}
                  className="flex items-center gap-4 p-2 rounded-lg hover:bg-muted/50 transition-colors cursor-pointer"
                >
                  <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center">
                    <Car className="h-5 w-5 text-primary" />
                  </div>
                  <div className="flex-1 space-y-1">
                    <p className="text-sm font-medium leading-none">Vehicle #{i}</p>
                    <p className="text-xs text-muted-foreground">
                      <MapPin className="inline h-3 w-3 mr-1" />
                      Downtown Area
                    </p>
                  </div>
                  <div className="flex items-center">
                    <span className="inline-flex h-2 w-2 rounded-full bg-green-500 mr-2"></span>
                    <span className="text-sm text-muted-foreground">Active</span>
                  </div>
                </div>
              ))}
              <Button variant="outline" size="sm" className="w-full mt-2">
                View All Vehicles
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Recent Transactions</CardTitle>
              <CardDescription>Your recent campaign payments and earnings</CardDescription>
            </div>
            <Button variant="outline" size="sm">
              View All
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Transaction</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Date</TableHead>
                <TableHead className="text-right">Amount</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {[
                {
                  id: "tx-001",
                  name: "Campaign #1234",
                  status: "completed",
                  date: "Mar 15, 2025",
                  amount: "$1,200.00",
                },
                { id: "tx-002", name: "Campaign #1233", status: "completed", date: "Mar 10, 2025", amount: "$950.00" },
                { id: "tx-003", name: "Campaign #1232", status: "pending", date: "Mar 5, 2025", amount: "$750.00" },
                {
                  id: "tx-004",
                  name: "Campaign #1231",
                  status: "completed",
                  date: "Feb 28, 2025",
                  amount: "$1,650.00",
                },
              ].map((transaction, index) => (
                <TableRow key={transaction.id} className="cursor-pointer hover:bg-muted/50 transition-colors">
                  <TableCell className="font-medium">{transaction.name}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <div
                        className={`h-2 w-2 rounded-full ${transaction.status === "completed" ? "bg-green-500" : "bg-yellow-500"}`}
                      />
                      {transaction.status.charAt(0).toUpperCase() + transaction.status.slice(1)}
                    </div>
                  </TableCell>
                  <TableCell>{transaction.date}</TableCell>
                  <TableCell className="text-right">{transaction.amount}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { BarChart3, Bell, Car, CreditCard, LogOut, MapPin, Menu, MessageSquare, Settings, User, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

interface DashboardLayoutProps {
  children: React.ReactNode
}

export default function DashboardLayout({ children }: DashboardLayoutProps) {
  const pathname = usePathname()
  const router = useRouter()
  const [open, setOpen] = useState(false)
  const [notifications, setNotifications] = useState(3)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Simulate loading
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1000)

return () => clearTimeout(timer)
  }, [])

const routes = [
    {
      href: "/dashboard",
      label: "Dashboard",
      icon: <BarChart3 className="h-5 w-5" />,
    },
    {
      href: "/dashboard/campaigns",
      label: "Campaigns",
      icon: <Car className="h-5 w-5" />,
    },
    {
      href: "/dashboard/tracking",
      label: "Tracking",
      icon: <MapPin className="h-5 w-5" />,
    },
    {
      href: "/dashboard/wallet",
      label: "Wallet",
      icon: <CreditCard className="h-5 w-5" />,
    },
    {
      href: "/dashboard/messages",
      label: "Messages",
      icon: <MessageSquare className="h-5 w-5" />,
    },
    {
      href: "/dashboard/settings",
      label: "Settings",
      icon: <Settings className="h-5 w-5" />,
    },
  ]

const handleLogout = () => {
    // In a real app, you would handle logout logic here
    router.push("/")
  }

if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="flex flex-col items-center">
          <Car className="h-12 w-12 text-primary animate-bounce" />
          <h2 className="mt-4 text-xl font-semibold">Loading your dashboard...</h2>
        </div>
      </div>
    )
  }

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger asChild>
            <Button variant="outline" size="icon" className="md:hidden">
              <Menu className="h-5 w-5" />
              <span className="sr-only">Toggle navigation menu</span>
            </Button>
          </SheetTrigger>
          <SheetContent side="left" className="flex flex-col">
            <div className="flex items-center border-b pb-4">
              <Link href="/" className="flex items-center gap-2 font-semibold">
                <Car className="h-6 w-6 text-primary" />
                <span>MotionFleet</span>
              </Link>
              <div className="ml-auto">
                <Button variant="ghost" size="icon" onClick={() => setOpen(false)}>
                  <X className="h-5 w-5" />
                  <span className="sr-only">Close navigation menu</span>
                </Button>
              </div>
            </div>
            <nav className="flex-1 overflow-auto py-4">
              <div className="grid gap-2">
                {routes.map((route) => (
                  <Link
                    key={route.href}
                    href={route.href}
                    onClick={() => setOpen(false)}
                    className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                      pathname === route.href ? "bg-primary text-primary-foreground" : "hover:bg-muted"
                    }`}
                  >
                    {route.icon}
                    {route.label}
                  </Link>
                ))}
              </div>
            </nav>
            <div className="border-t pt-4">
              <Button variant="ghost" className="w-full justify-start gap-2" onClick={handleLogout}>
                <LogOut className="h-5 w-5" />
                Sign out
              </Button>
            </div>
          </SheetContent>
        </Sheet>
        <div className="flex items-center gap-2">
          <Link href="/" className="flex items-center gap-2 font-semibold">
            <Car className="h-6 w-6 text-primary" />
            <span className="hidden md:inline-block">MotionFleet</span>
          </Link>
        </div>
        <div className="flex-1"></div>
        <div className="flex items-center gap-4">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="icon" className="relative">
                <Bell className="h-5 w-5" />
                {notifications > 0 && (
                  <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
                    {notifications}
                  </span>
                )}
                <span className="sr-only">Notifications</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-80">
              <DropdownMenuLabel>Notifications</DropdownMenuLabel>
              <DropdownMenuSeparator />
              {[
                {
                  title: "New campaign application",
                  desc: "Vehicle #12 applied to your campaign",
                  time: "5 minutes ago",
                },
                { title: "Payment received", desc: "You received $950 for Campaign #1233", time: "1 hour ago" },
                { title: "Campaign completed", desc: "Campaign #1231 has ended successfully", time: "1 day ago" },
              ].map((notification, i) => (
                <DropdownMenuItem key={i} className="cursor-pointer p-4 hover:bg-muted">
                  <div className="flex gap-4 items-start">
                    <div className="h-8 w-8 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
                      <Bell className="h-4 w-4 text-primary" />
                    </div>
                    <div className="space-y-1">
                      <p className="text-sm font-medium">{notification.title}</p>
                      <p className="text-xs text-muted-foreground">{notification.desc}</p>
                      <p className="text-xs text-muted-foreground">{notification.time}</p>
                    </div>
                  </div>
                </DropdownMenuItem>
              ))}
              <DropdownMenuSeparator />
              <DropdownMenuItem className="cursor-pointer justify-center">
                <Button variant="ghost" size="sm" className="w-full" onClick={() => setNotifications(0)}>
                  Mark all as read
                </Button>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

<DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="icon" className="rounded-full">
                <Avatar className="h-8 w-8">
                  <AvatarImage src="/placeholder.svg?height=32&width=32" alt="User" />
                  <AvatarFallback>JD</AvatarFallback>
                </Avatar>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuLabel>My Account</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem className="cursor-pointer" onClick={() => router.push("/dashboard/settings")}>
                <User className="mr-2 h-4 w-4" />
                Profile
              </DropdownMenuItem>
              <DropdownMenuItem className="cursor-pointer" onClick={() => router.push("/dashboard/settings")}>
                <Settings className="mr-2 h-4 w-4" />
                Settings
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem className="cursor-pointer" onClick={handleLogout}>
                <LogOut className="mr-2 h-4 w-4" />
                Log out
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </header>
      <div className="flex flex-1">
        <aside className="hidden w-64 border-r bg-muted/40 md:block">
          <nav className="grid gap-2 p-4">
            {routes.map((route) => (
              <Link
                key={route.href}
                href={route.href}
                className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-all ${
                  pathname === route.href ? "bg-primary text-primary-foreground" : "hover:bg-muted"
                }`}
              >
                {route.icon}
                {route.label}
              </Link>
            ))}
          </nav>
        </aside>
        <main className="flex-1 overflow-auto">{children}</main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
"use client"

import * as React from "react"

export const Chart = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={className} {...props} />,
)
Chart.displayName = "Chart"

export const ChartContainer = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={className} {...props} />,
)
ChartContainer.displayName = "ChartContainer"

export const ChartTooltip = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={className} {...props} />,
)
ChartTooltip.displayName = "ChartTooltip"

export const ChartTooltipContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={className} {...props} />,
)
ChartTooltipContent.displayName = "ChartTooltipContent"

export const ChartLegend = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={className} {...props} />,
)
ChartLegend.displayName = "ChartLegend"

export const ChartLegendItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={className} {...props} />,
)
ChartLegendItem.displayName = "ChartLegendItem"

[V0_FILE]json:file="package.json"
{
  "name": "motionfleet",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-sheet": "^1.0.4",
    "@radix-ui/react-tabs": "^1.0.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "lucide-react": "^0.294.0",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18",
    "recharts": "^2.10.3",
    "tailwind-merge": "^2.1.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}
7d:["$","$L85",null,{"chatId":"2jpAxb5Q12z","children":["$","$L86",null,{"data":{"@\"active-block\",\"2jpAxb5Q12z\",":{"id":"0FIdxNCzj8G","messageId":"nqJQdglr41XNl7HGmKy8Juyx6vCQvsin","source":"$87","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"motionfleet","type":"code-project","project":"motionfleet"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"2jpAxb5Q12z\",":false,"":null},"children":"$L88"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

About

Tags

Share

More from abhiraj2241

More Templates Like This